<template>
    <div>
        <a-pagination
            showQuickJumper
            :pageSizeOptions="pageSizeOptions"
            :total="total"
            showSizeChanger
            :pageSize="pageSize"
            v-model="pageNum"
            @showSizeChange="onShowSizeChange"
            @change="onChange"
        >
            <template slot="buildOptionText" slot-scope="props">
                <span v-if="props.value !== '5'">{{ props.value }}条/页</span>
                <span v-if="props.value === '5'">全部</span>
            </template>
        </a-pagination>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            pageSizeOptions: ["1", "2", "3", "4", "5"],
        };
    },
    computed: {
        ...mapState({
            pageNum: state => state.Pagination.pager.pageNum,
            pageSize: state => state.Pagination.pager.pageSize,
            total: state => state.Pagination.pager.total,
        }),
        pageNum: {
            get() {
                return this.$store.state.Pagination.pager.pageNum;
            },
            set(val) {
                this.$store.state.Pagination.pager.pageNum = val;
            },
        },
    },
    methods: {
        onChange(pageNumber) {
            let that = this;
            that.current = pageNumber;
            that.$emit("changePage", pageNumber);
        },
        onShowSizeChange(current, pageSize) {
            let that = this;
            let changeSize = {};
            changeSize.pageNum = current;
            changeSize.pageSize = pageSize;
            that.$emit("paginationData", changeSize);
        },
    },
};
</script>
